<template>
	<view class="bg-white">
		<view class="head">
			<view v-for="(item,index) in list" class="head-item" @click="handleGetId(index)">
				<image class="head-img select" mode="aspectFit" v-if="selectIndex===index" :src="item.mpicon"></image>
				<image class="head-img un-select" mode="aspectFit" v-else :src="item.mpicon"></image>
			</view>
		</view>
		
		<scroll-view scroll-x="true" class="scroll-x-wrapper text-left">
			<view @click="handleGetChildId(0)" class="padding-left-sm inline-block">
			<!-- <view @click="handleGetChildId(0)" class="leftImg">	 -->
				<view class="flex align-center">
					<image class="item-right-image select" v-if="selectIndex1 === 0" src="https://jianxia.mazhoudao.com/h5/static/home/jineng/all.png"></image>
					<image class="item-right-image un-select" v-else src="https://jianxia.mazhoudao.com/h5/static/home/jineng/all.png"></image>
					<text class="padding-left-xs padding-right-sm" :class="{'text-primary': selectIndex1 === 0}">全部</text>
				</view>
			</view>
			<view v-for="(item, index) in liupailists" @click="handleGetChildId(index + 1)" class="padding-left-sm inline-block">
			<!-- <view v-for="(item, index) in liupailists" @click="handleGetChildId(index + 1)" class="leftImg">	 -->
				<view class="flex align-center">
					<image class="item-right-image select" v-if="selectIndex1 === index + 1" :src="item"></image>
					<image class="item-right-image un-select" v-else :src="item"></image>
					<text class="padding-left-xs padding-right-sm" :class="{'text-primary': selectIndex1 === index + 1}">{{ list[selectIndex].branch[index] }}{{ list[selectIndex].name}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "mp-select",
		data() {
			return {
				selectIndex: 0,
				selectIndex1: 0,
				liupailists: [],
				style: "width:0%",
				list: this.$Global.JobType,
			};
		},
		created() {
			let w = 1 / (this.$Global.MengPai_FZ_icon[this.selectIndex].length + 1) * 100
			this.style = "width:" + w + "%"
			this.liupailists = this.$Global.MengPai_FZ_icon[this.selectIndex]
		},
		methods: {
			handleGetChildId(index) {
				this.selectIndex1 = index
				this.$emit('handleGetChildId', index)
			},
			handleGetId(index) { //门派
				this.selectIndex1 = 0
				this.selectIndex = index
				this.liupailists = this.$Global.MengPai_FZ_icon[this.selectIndex]
				this.$emit('handleGetId', [index, this.selectIndex1])
			}
		}
	}
</script>

<style scoped>
	.head {
		height: 180rpx;
		width: 100%;
		/* background-color: #000000; */
		display: flex;
		overflow: scroll;
		/* padding-right: 26rpx; */
	}

	.head::-webkit-scrollbar {
		width: 0;
		height: 0rpx;
	}

	.head-item {
		height: 100%;
		/* margin-left: 26rpx; */
		/* background-color: #008000; */
	}

	.head-img {
		margin-top: 20rpx;
		width: 120rpx;
		height: 120rpx;
		/* background-color: #0000FF; */
	}

	.items {
		width: 100%;
		height: 100rpx;
		/* background-color: #0000FF; */
		overflow: scroll;
		display: flex;
		/* padding-left: 60rpx; */
		/* padding-right: 60rpx; */
	}

	.item-item {
		float: left;
		/* margin-left: 60rpx; */
		display: flex;
		height: 60rpx;
	}

	.item-text {
		float: left;
		height: 60rpx;
		line-height: 60rpx;
		/* text-align: center; */
		margin-left: 20rpx;

	}

	.item-right-image {
		float: left;
		width: 60rpx;
		height: 60rpx;
	}

	.item-right-images1 {
		margin-left: 60rpx;
		height: 60rpx;
		float: left;
		min-width: 220rpx;
	}

	.item-right-images {
		height: 60rpx;
		float: left;
		min-width: 250rpx;
		/* height: 150rpx; */
		/* background-color: #09BB07; */
		/* text-align: center; */
	}


	.items::-webkit-scrollbar {
		width: 0;
	}

	.select {
		color: #57BEF2;
	}

	.un-select {
		color: #808080;
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
		filter: gray;
	}
	/* .scroll-x-wrapper{
		 display: flex;
		
	} */
	/* .leftImg{
		position: absolute;
		width: 100px;
		height: 100px;
	} */
	
	
</style>
